<template>
	<view class='seach-page'>
		<uni-nav-bar :fixed="true" color="#333333" background-color="#409EFF" :border="false">
					<view class="input-view">
						<uni-icons type="search" size="22" color="#666666" />
						<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="搜索项目/机构" @confirm="search">
						<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
					</view>
		</uni-nav-bar>
		<view v-if="isHistory" class="seach-hot">
			<view class="seach-title">
				<text>热门搜索</text>
			</view>
			<view class="seach-hot-content">
				<view class="seach-hot-item" v-for="(item, index) in seachHotList" :key="index" @click='seachNovelBook(item)'>
					{{ item }}
				</view>
			</view>
		</view>
		<view v-else class="seach-hot">
			<view v-if="booklist.length > 0" class="seach-list">
				<view  class='ws-book-item' v-for="(item,index) in booklist" :key="item.Id" @click='watchBookInfoEvent(item.Id)'>
					<view class="ws-book-imgb">
						<image class='ws-book-img' :src="item.Img" mode="aspectFill"></image>
					</view>
					<view class="ws-book-info">
						<view class="ws-book-name">
							{{item.Name}}
						</view>
						<view class="ws-book-doc">
							{{item.Desc}}
						</view>
						<view class="ws-book-new-catalog">
							最新章节：{{item.LastChapter}}
						</view>
						<view class="ws-book-tag">
							<text class='tag-cname'>{{item.CName}}</text>
							<text class='tag-status'>{{item.BookStatus}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data"> <text v-if='!loadflag'>没有搜索到相关内容</text></view>
		</view>
		<view class="no-data" v-if='loadflag'>
			加载中...
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadflag:false,
				seachHotList:[
					'深夜书屋','我欲封天','星辰变','庆余年','完美世界'
				],
				searchVal:'',
				isHistory: true,
				booklist: [],
			};
		},
		onLoad(){
		},
		methods:{
			/**
			 * 当 searchInput 输入时触发
			 */
			search(){
				this.seachNovelBook(this.searchVal)
			},
			clear(){
				this.searchVal=''
				this.seachNovelBook(this.searchVal)
			},
				
			watchBookInfoEvent(id){
				uni.navigateTo({
				    url: `/pages/books/bookInfo/bookInfo?bookid=${id}`
				});
			},
			async seachNovelBook(bookname){
				this.loadflag = true
				this.booklist = []
				this.isHistory = false
				const data = await this.$https({
					url:`book/search/${bookname}`,
					data:{
						page:1
					}
				})
				if(data&&data.code===200){
					this.loadflag = false
					this.booklist = this.booklist.concat(data.data)
				}else{
					this.loadflag = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.seach-page{
		paddingtop:80rpx;
		.seach-hot{
			padding:20rpx;
			.seach-title{
				font-size:32rpx;
				color:#666;
				line-height:48rpx;
			}
			.seach-hot-content{
				.seach-hot-item{
					display:inline-block;
					font-size:28rpx;
					color:#00B1FF;
					border:1px solid #00B1FF;
					padding:0 20rpx;
					line-height: 60rpx;
					border-radius: 32rpx;
					margin:20rpx 20rpx 10rpx 0;
				}
			}
		}
		.ws-book-item{
			display: flex;
			padding:40rpx 0;
			border-bottom:1px solid #ddd;
			.ws-book-imgb{
				width:240rpx;
				height:320rpx;
				.ws-book-img{
					width:240rpx;
					height:320rpx;
				}
			}
			.ws-book-info{
				margin-left:30rpx;
				.ws-book-name{
					font-size:42rpx;
					color:#333;
				}
				.ws-book-doc{
					margin-top:20rpx;
					font-size: 28rpx;
					min-height:120rpx;
					color:#666;
					line-height: 60rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.ws-book-new-catalog{
					font-size: 28rpx;
					color:#999;
					line-height: 60rpx;
				}
				.ws-book-tag{
					margin-top:20rpx;
					font-size:28rpx;
					color:#999;
					text{
						margin-right: 30rpx;
						padding:8rpx 12rpx;
						border-radius: 10rpx;
						color:#fff;
					}
					.tag-cname{
						background:#00D6B6;
						
					}
					.tag-status{
						background:#00B1FF;
					}
				}
			}
			
		}
		.no-data {
			text-align: center;
			color: #999;
			margin: 100rpx;
		}
	}
</style>
